<template>
  <div class="container">
    <div id="root" style="width:400px;height:400px"></div>
    <button @click="changeValue">更改value</button>
  </div>
</template>

<script>
import Clay from '@csii/vx-clay/dist/clay-template.js';

import uiLines from '@csii/vx-clay-echart/ui-lines.js';
// 注册组件
Clay.series('ui-lines', uiLines);
import example from './example.clay';
export default {
  data() {
    return {
      clay: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.clay = new Clay({
        el: document.getElementById('root'),
        render: example,
        data: function() {
          return {
            xnumber: -10,
            ynumber: 10,
            widthnumber: 400,
            heightnumber: 400,
            dataArray: [
              [12.6, 23.0, 28.5, 29.8, 33.5, 36.0, 31.2, 37.1, 34.4, 28.2, 22.4, 14.2],
              [4.5, 12.2, 16.1, 24.4, 30.4, 30.2, 28.4, 30.7, 29.0, 22.2, 17.9, 10.2],
              [16.6, 29.9, 35.5, 39.8, 40.5, 42.0, 39.9, 43.1, 38.4, 35.2, 33.3, 27.2],
            ],
            rulerArray: ['衣服', '鞋子', '首饰', '头饰', '包包', '日用品'],
            data3: ['#7ec5e0', '#ee6868', '#face6a'],
          };
        },
        methods: {
          doit: function(target) {
            console.log(target, 'target');
          },
        },
      });
    },
    changeValue() {
      // this.clay.value=100
    },
  },
};
</script>

<style lang="scss" scoped></style>
